import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import { connect } from 'react-redux'
import { addPerson } from '../../redux/actions/person'


class Person extends Component {

  // 添加
  addPerson = () => {
    const name = this.nameNode.value
    const age = this.ageNode.value*1
    const personObj = {
      id: nanoid(),
      name,
      age
    }
    this.props.addPerson(personObj)
    this.nameNode.value = this.ageNode.value = ''
  }

  render() {
    return (
      <div>
        <h2>我是Person组件，上方组件求和为：{this.props.count}</h2>
        <input type="text" ref={e => this.nameNode = e} placeholder="输入名字"/>
        <input type="text" ref={e => this.ageNode = e} placeholder="输入年龄"/>
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {
            this.props.persons.map(e => {
              return <li key={e.id}>{e.name}--{e.age}</li>
            })
          }
        </ul>
      </div>
    )
  }
}


// 暴露
export default connect (
  state => ({
    persons: state.persons,
    count: state.count
  }),
  {addPerson}
)(Person)